<template>
  <div>
<!-- 	  <div class="demo-input-suffix">
		<el-button type="primary" icon="el-icon-search">搜索</el-button>
	  	<el-input
	  	placeholder="请输入内容"
	  	prefix-icon="el-icon-search"
	  	v-model="input2" style="width: 25%;">
	  	</el-input>
		<el-button type="success" style="float: right;margin-bottom: 10px;" round>导出</el-button>
	  </div> -->
    <template>
      <el-table
        :data="tableData5"
        style="width: 100%">
        <el-table-column
          prop="sendname"
          label="发送者"
		  width="70px"
        >
        </el-table-column>
        <el-table-column
          prop="sendMsg"
          label="学院班级"
		  width="140px"
         >
        </el-table-column>
        <el-table-column
          prop="liuyan"
          label="留言"
        >
        </el-table-column>
		<el-table-column
		  prop="songmsg"
		  label="歌曲"
		  width="140px"
		>
		</el-table-column>
		<el-table-column
		  prop="receiver"
		  label="接受者"
		  width="70px"
		>
		</el-table-column>
		<el-table-column
		  prop="createTime"
		  label="订单时间"
		  width="160px"
		>
		</el-table-column>
		<el-table-column
		  prop="wantTime"
		  label="需求时间"
		  width="160px"
		>
		</el-table-column>
		<el-table-column label="操作" width="70px">
			<template slot-scope="scope">
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
			</template>
		</el-table-column>
      </el-table>
    </template>
		<div class="block" style="margin-top: 10px;">
			<el-pagination background layout="prev, pager, next" :page-size='4' :total="total" :current-page="currentPage"
			 @current-change="handleCurrentChange">
			</el-pagination>
		</div>
		
		<el-dialog
		  title="调剂需求"
		  :visible.sync="dialogVisible"
		  width="30%"
		  >
		  <span>{{trimMsg}}</span>
		  <span slot="footer" class="dialog-footer">
			    <el-button type="success" v-show="flag1" @click="Onekey()">一键播歌</el-button>
				  <el-button type="success" @click="mySong()">手动播歌</el-button>
			 <el-button type="primary" @click="dialogVisible = false">取消</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="留言"
		  :visible.sync="dialogVisible3"
		  width="30%"
		  >
		  <span>{{liuyan}}</span>
		  <span slot="footer" class="dialog-footer">
			    <el-button type="success" v-show="flag1" @click="openMusic()" >本机播歌</el-button>
				  <el-button type="success" @click="finish()">我已播完</el-button>
			 <el-button type="primary" v-show="statu" @click="dialogVisible3 = false">取消</el-button>
		  </span>
		</el-dialog>
		
		<audio autoplay="" v-if="flagAudio">
			<source :src="audio" type="audio/wav">
		</audio>
		
		<audio autoplay="" v-if="flagAudio2">
			<source :src="musicSrc">
		</audio>
		
		<el-dialog
		  title="选择声音"
		  :visible.sync="dialogVisible2"
		  width="30%"
		  >
<!-- 		  0-云小宁，亲和女声（默认）
		  1-云小奇，亲和男声
		  2-云小晚，成熟男声
		  4-云小叶，温暖女声
		  5-云小欣，情感女声
		  6-云小龙，情感男声
 -->
		  <el-row>
			  <!-- <el-button>亲和女声</el-button> -->
			  <el-button type="primary" @click="select(0)">亲和女声</el-button>
			  <el-button type="success" @click="select(4)">温暖女声</el-button>
			  <el-button type="info" @click="select(5)">情感女声</el-button>
			  <!-- <el-button type="warning">警告按钮</el-button> -->
			  <!-- <el-button type="danger">危险按钮</el-button> -->
		  </el-row>
		  <br>
		  <el-row>
			  <!-- <el-button round>圆角按钮</el-button> -->
			  <el-button type="primary" round @click="select(1)">亲和男声</el-button>
			  <el-button type="success" round @click="select(2)">成熟男声</el-button>
			  <el-button type="info" round @click="select(6)">情感男声</el-button>
			  <!-- <el-button type="warning" round>警告按钮</el-button> -->
			  <!-- <el-button type="danger" round>危险按钮</el-button> -->
		  </el-row>
		</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'filterTable',
  data () {
    return {
      tableData5: [{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      },{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      },{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      },{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      },{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      },{
		  sendname: '张三疯',
		  sendMsg: '家里蹲学院18网络',
		  liuyan: '漫漫人生路，有你相伴，感谢过往！',
		  songmsg: '张三的《大海》',
		  receiver: '秦川往',
		  createTime: '2020-12-12 00:00:00',
		  wantTime: '2020-12-13 12:00:00',
		  id: 1
      }],
	  total: 60,
	  currentPage: 1,
	  seeid: '',
	  trimMsg: '无特别说明',
	  dialogVisible: false,
	  dialogVisible2: false,
	  dialogVisible3: false,
	  flag1:false,
	  flagAudio: false,
	  flagAudio2: false,
	  liuyan: '',
	  statu: true,
	  musicSrc: ''
    }
  },
  created() {
	  this.axios.get(this.server + '/songManage/getTable2?page=1&token=' + this.store.getters.token).then(res => {
		  if(res != '0') {
				this.tableData5 = res.data.tableData
				this.total = res.data.total
		  }else {
			  this.$message.error("获取数据失败！")
		  }
	  },res=> {
		  this.$message.error("网络连接失败！")
	  })
  },
  mounted() {
	  // this.watchMusicState()
  },
  methods: {
	  openMusic() {
		  console.log(this.musicSrc)
		if(this.musicSrc != '') {
			// 此时是从一键播歌过来的
			this.flagAudio = false
			// this.audio = this.musicSrc
			this.flagAudio2 = true
		}else {
			//发送请求，返回歌曲
		}
		
		this.axios.get(this.server + '/songManage/getTable2?page=1&token=' + this.store.getters.token).then(res => {
			  if(res != '0') {
					this.tableData5 = res.data.tableData
					this.total = res.data.total
			  }else {
				  this.$message.error("获取数据失败！")
			  }
		},res=> {
			  this.$message.error("网络连接失败！")
		})
	  },
	  // watchMusicState(){
		 //  let _this = this;
		 //  // let $audio = document.getElementsByTagName('audio')[0];//获取音乐DOM节点
		 //  // let playOrPause = document.getElementsByClassName('playOrPause')[0];
		 //  // console.log($audio);
			// 	　　var audio = document.getElementsByTagName('audio')[0]; 
			// 		// console.log(Audio)
			// 	　　audio.loop = false;
			// 	　　audio.addEventListener('ended', function () {
			// 		this.dialogVisible2 = false
			// 	　　//监听到播放结束后，在此处可调用自己的接口
			// 			this.axios.get(this.server + '/songManage/getTable2?page=1&token=' + this.store.getters.token).then(res => {
			// 					  if(res != '0') {
			// 							this.tableData5 = res.data.tableData
			// 							this.total = res.data.total
			// 					  }else {
			// 						  this.$message.error("获取数据失败！")
			// 					  }
			// 			},res=> {
			// 					  this.$message.error("网络连接失败！")
			// 			})
				
			// 	　　}, false);
	  // },
	  handleCurrentChange(val) {
		  this.axios.get(this.server + '/songManage/getTable2?page=' + val + '&token=' + this.store.getters.token).then(res => {
			  if(res != '0') {
					this.tableData5 = res.data.tableData
			  }else {
				  this.$message.error("获取数据失败！")
			  }
		  },res=> {
			  this.$message.error("网络连接失败！")
		  })
	  },
	  handleEdit(index,row) {
		  this.flagAudio = false
		  this.flagAudio2 = false
		  this.musicSrc = ''
		  this.axios.get(this.server + '/songManage/getMsgById?id=' + row.id + '&token=' + this.store.getters.token).then(res => {
			  if(res != '0') {
				  this.dialogVisible = true
				  this.trimMsg = res.data.msg
				 this.seeid = row.id
				 this.liuyan = row.liuyan
				 
				 if(res.data.count == 0) {
					 this.flag1 = false
				 }else {
					 this.flag1 = true
				 }
			  }else {
				  this.$message.error("获取数据失败！")
			  }
		  },res=> {
		  		this.$message.error("网络连接失败！")
		  })
	  },
	  Onekey() {
		// 要从数据库中查询，是否具被一键播歌的条件，就是歌库里是否有歌
		this.dialogVisible = false
		// 打开一个新窗口，选择播放的声音
		this.dialogVisible2 = true
	  },
	  select(num) {
		  this.$message.info("正在加载音频，请稍后！")
		  // 获取音频
		  this.axios.get(this.server + '/songManage/getMusic?id=' + this.seeid + "&num=" + num + '&token=' + this.store.getters.token).then(res => {
		  	if(res.data != '0') {
		  		this.audio = 'data:audio/way;base64,' + res.data.audio;
		  		// console.log(this.audio)
		  		this.flagAudio = true
		  		this.$message.success("歌曲加载成功，正在播放,请勿离开！")

				this.dialogVisible2 = false
				// this.dialogVisible3 = true
				this.statu = false
				this.musicSrc = res.data.music
			　　//监听到播放结束后，在此处可调用自己的接口
					// this.axios.get(this.server + '/songManage/getTable2?page=1&token=' + this.store.getters.token).then(res => {
					// 		  if(res != '0') {
					// 				this.tableData5 = res.data.tableData
					// 				this.total = res.data.total
					// 		  }else {
					// 			  this.$message.error("获取数据失败！")
					// 		  }
					// },res=> {
					// 		  this.$message.error("网络连接失败！")
					// })

		  	}else {
				this.$message.error("获取数据失败！")
			}
		  },res => {
		  	this.$message.error("网络连接失败！")
		  })
	  },
	  mySong() {
		  this.dialogVisible = false
		  this.dialogVisible3 = true
	  },
	  finish() {
		  // 修改
		  this.axios.get(this.server + '/songManage/finish?id=' + this.seeid + '&token=' + this.store.getters.token).then(res => {
		  		  if(res != '0') {
		  			  this.$message.success("状态修改成功！")
					  this.dialogVisible3 = false
					  
					  this.axios.get(this.server + '/songManage/getTable2?page=1&token=' + this.store.getters.token).then(res => {
					  		  if(res != '0') {
					  				this.tableData5 = res.data.tableData
					  				this.total = res.data.total
					  		  }else {
					  			  this.$message.error("获取数据失败！")
					  		  }
					  },res=> {
					  		  this.$message.error("网络连接失败！")
					  })
		  		  }else {
		  			  this.$message.error("获取数据失败！")
		  		  }
		  },res=> {
		  		  this.$message.error("网络连接失败！")
		  })
	  }
  }
}
</script>

<style scoped>

</style>
